<template>
    <div class="gao">
        <div class="totem-background"></div>
        <h2>精彩聚集</h2>
        <el-row class="row-bg" justify="space-between">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <Indexleft></Indexleft>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple-light">
                    <Indexmiddle class="weiyi"></Indexmiddle>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <Indexleft></Indexleft>
                </div>
            </el-col>
        </el-row>
       <!--纯图片-->
        <Imgarr></Imgarr>
      <!--音乐专区-->
      <music></music>
        <!--热门专区-->
      <remen></remen>
      <!--合作专区-->
      <hezuo></hezuo>
    </div>

</template>
<script setup>

import Indexleft from './indexleft.vue'
import Indexmiddle from './indexmiddle.vue'
import Imgarr from '../../components/imgArr/index.vue';
import music from '../../components/musiczone/index.vue';
import remen from '../../components/topranking/index.vue';
import hezuo from '../../components/partner/index.vue'
import footerff from '../../components/footer/index.vue'
</script>
<style scoped>
.totem-background {
    height: 50px;
    width: 618px;
    margin: 15px auto;
    background-image: url(/static/img/ribbon-totem.571264d.png);
}

.gao {
    /* height: 80px; */
    width: 1200px;
    margin: 0 auto;
}

.weiyi {
    margin-left: -145px;
}

h2 {
    font-weight: Bold;
    width: 130px;
    text-align: center;
    margin: auto;
    margin-top: -70px;
    text-transform: uppercase;
    font-size: 18px;
}

/* .el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
} */
</style>